<template>
	<view style="background-color: #67b1ff;height: 95vh;">
		<headerContent></headerContent>
		<view class="img-sum" v-if="Object.keys(info).length !== 0">
			{{imgIndex}}/{{imgSum}}
		</view>
		<view class="img-content" v-if="Object.keys(info).length !== 0">
			<view class="img-style">
				<img :src="info.works" alt="" style="width: 100%;height: 100%;">
			</view>
			<view class="img-name">
				{{info.title}}
			</view>
		<!-- 	<view class="img-tag">
				<u-tag text="雪月夜" type="primary" />
			</view> -->
			<view class="user-style">
				{{info.uploadName}} {{info.evaluateStar}}岁 {{info.createTime}}
			</view>
		</view>
		<view class="no-work" v-if="Object.keys(info).length === 0">
			暂无作品！
		</view>
		<view class="img-operate">
			<view class="all-course" @click="courseShowBtn">{{courseName}}</view>
			<u-select v-model="courseShow" :list="courseList" @confirm="confirm"></u-select>
			<view class="pre-pic" @click="prePicture"><u-icon name="arrow-left" color="#ffffff"></u-icon>上一张</view>
			<view class="pre-pic" @click="nextPicture">下一张 <u-icon name="arrow-right" color="#ffffff"></u-icon></view>
		</view>

	</view>
</template>

<script>
	import headerContent from '@/components/headerContent.vue';
	import {
		getWorksList,
		getAllCourseList
	} from '@/utils/api.js'
	export default {
		components: {
			headerContent,

		},
		data() {
			return {
				imgIndex: 1,
				imgSum: 4,
				imgUrl: '',
				imgList: [],
				courseShow: false,
				courseList: [{
					value: '',
					label: '全部'
				}],
				info: {},
				courseId: '',
				courseName: '全部课程'
			}
		},
		// onLoad() {
		// 	this.getWorksList()
		// },

		methods: {
			// 
			async getWorksList() {
				const data = {
					courseId: this.courseId
				}
				const {
					rows,
					total,
					code
				} = await getWorksList(data)

				if (code == 200) {

					if (rows) {
						this.imgList = rows
						this.imgSum = total
						this.info = this.imgList[0]
					} else {
						this.info = {}
					}

				}

				// console.log("");
			},
			prePicture() {
				if (this.imgIndex == 1) {
					uni.showToast({
						title: `已经是第一张啦`,
						icon: 'none',
						duration: 2000
					});
				} else {
					this.imgIndex = this.imgIndex - 1
					this.imgList.forEach((item, index) => {
						if (this.imgIndex == index + 1) {

							this.info = item
						}
					})
				}
			},
			nextPicture() {
				console.log("this.imgList.length", this.imgList.length);
				if (this.imgIndex == this.imgList.length) {
					uni.showToast({
						title: `已经是最后一张啦`,
						icon: 'none',
						duration: 2000
					});
				} else {
					// console.log("1",index);
					this.imgIndex = this.imgIndex + 1
					this.imgList.forEach((item, index) => {
						if (this.imgIndex == index + 1) {

							this.info = item
						}
					})
				}
			},
			courseShowBtn() {
				this.courseShow = true
			},
			confirm(e) {
				console.log("2", e[0].value);
				this.courseId = e[0].value
				this.courseName = e[0].label
				this.getWorksList()
			},
			async getAllCourseList() {
				const res = await getAllCourseList()
                   
				const courseListA = res.data.map(v => {
					return {
						// ...this.courseList,
						value: v.id,
						label: v.name
					}
				})
				this.courseList = [...this.courseList,...courseListA]
				console.log("courseList", this.courseList);
			},
		},
		onLoad() {
			this.getAllCourseList()
			this.getWorksList()
		}
	}
</script>

<style>
	.img-sum {
		width: 100rpx;
		height: 50rpx;
		background-color: #bfcfe0;
		opacity: .7;
		text-align: center;
		line-height: 50rpx;
		margin: 40rpx auto;
		color: #ffffff;
		border-radius: 50rpx;
		border: 2rpx solid #ffffff;

	}

	.img-operate {
		display: flex;
		justify-content: space-between;
		padding: 70rpx;
	}

	.img-content {
		width: 80%;
		margin: 30rpx auto;
		background-color: #ffffff;
	}

	.img-style {
		width: 100%;
		height: 500rpx;
	}

	.img-name {
		margin-top: 40rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.img-tag {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.user-style {
		color: #b3b3b3;
		font-size: 24rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.all-course {
		width: 170rpx;
		height: 60rpx;
		background-color: #bfcfe0;
		opacity: .7;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		border-radius: 50rpx;
		border: 2rpx solid #ffffff;
		font-size: 26rpx;
	}

	.pre-pic {
		color: #ffffff;
		margin-top: 15rpx;
	}

	.no-work {
		text-align: center;
		margin-top: 100rpx;
		color: #fff;

	}
</style>